<template>
  <div class="app-container">
    <el-form :model="queryForm">
      <el-form-item prop="dictType" label="字典名称">
        <el-select v-model="queryForm.dictType" :field-names="{ value: 'dictType', label: 'dictName' }">
          <el-option v-for="item in dictTypeOptions" :key="item.dictName" :label="item.dictName" :value="item.dictType" />
        </el-select>
      </el-form-item>
      <el-form-item prop="dictTag" label="字典标签">
        <el-input v-model="queryForm.dictTag" placeholder="请输入字典标签" />
      </el-form-item>
      <el-form-item prop="status" label="字典状态">
        <el-select v-model="queryForm.status" placeholder="请选择字典状态">
          <el-option :value="2">正常</el-option>
          <el-option :value="1">关闭</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-space>
          <el-button v-has="'admin:sysDictData:query'" type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </el-space>
      </el-form-item>
    </el-form>

    <el-divider />

    <div class="table-action">
      <el-button v-has="'admin:sysDictData:add'" type="primary" @click="handleAdd">新增</el-button>
    </div>

    <el-table :data="tableData">
      <el-table-column label='字典编码' prop='dictCode' />
      <el-table-column label='字典标签' prop='dictLabel' />
      <el-table-column label='字典键值' prop='dictValue' />
      <el-table-column label='字典排序' prop='dictSort' />
      <el-table-column label='状态' prop='status'>
        <template #default="scope">
          <Status :status="scope.row.status"></Status>
        </template>
      </el-table-column>
      <el-table-column label='备注' prop='remark' />
      <el-table-column label='创建时间' prop='createdAt' />
      <el-table-column label='操作' prop='action' />
    </el-table>

    <el-dialog v-model="modalVisible" :title="modalTitle" title-align="start"
      @close="modalFormRef.resetFields()" @before-ok="handleBeforeOk" @ok="handleSubmit">
      <el-form :model="modalForm" :rules="rules" ref="modalFormRef">
        <el-form-item prop="dictType" label="字典类型">
          <el-input v-model="modalForm.dictType" disabled></el-input>
        </el-form-item>
        <el-form-item prop="dictLabel" label="数据标签">
          <el-input v-model="modalForm.dictLabel" placeholder="请输入数据标签"></el-input>
        </el-form-item>
        <el-form-item prop="dictValue" label="数据键值">
          <el-input v-model="modalForm.dictValue" placeholder="请输入数据键值"></el-input>
        </el-form-item>
        <el-form-item prop="dictSort" label="显示排序">
          <el-input-number v-model="modalForm.dictSort" :default-value="0" mode="button"></el-input-number>
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-radio-group v-model="modalForm.status">
            <el-radio :label="2">正常</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="remark" label="备注">
          <el-input type="textarea" v-model="modalForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- Akiraka 20230223 删除与批量删除 开始 -->
    <!-- <DeleteModal 
      :data="deleteData" 
      :visible="deleteVisible" 
      :apiDelete="deleteDictData" 
      @deleteVisibleChange="() => deleteVisible = false"
    /> -->
    <!-- Akiraka 20230223 删除与批量删除 结束 -->
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onBeforeMount, watch } from 'vue';
import { getDictData, addDictData, updateDictData, deleteDictData } from '@/api/admin/sys-dict-data';
import { getDictType } from '@/api/admin/sys-dict';
import Status from '@/components/Fields/State.vue'
const modalFormRef = ref({});
// Akiraka 20230210 删除数据
const deleteData = ref([])
// Akiraka 20230210 删除对话框
const deleteVisible = ref(false)
// Akiraka 20230210 监听删除事件
watch(() => deleteVisible.value ,(value) => {
  if ( value == false ) {
    getDictDataInfo({...proxy.$route.params, ...pager});
  }
})


const { proxy } = getCurrentInstance();

// 当前页码
const currentPage = ref(1);

// 分页
const pager = {
  count: 0,
  pageIndex: 1,
  pageSize: 10,
};

// Rules
const rules = {
  dictLabel: [{ required: true, message: '请输入数据标签' }],
  dictValue: [{ required: true, message: '请输入数据键值' }],
  dictSort: [{ required: true, message: '请选择排序' }],
};

// Modal
const modalVisible = ref(false);
const modalTitle = ref('默认标题');

// DictType Options
const dictTypeOptions = ref([]);

// 搜索表单
const queryForm = reactive({});

// Modal表单
const modalForm = reactive({
  status: 2
});

// 表格
const tableData = ref([]);
const columns = [
  { title: '字典编码', dataIndex: 'dictCode' },
  { title: '字典标签', dataIndex: 'dictLabel' },
  { title: '字典键值', dataIndex: 'dictValue' },
  { title: '字典排序', dataIndex: 'dictSort' },
  { title: '状态', dataIndex: 'status', slotName: 'status' },
  { title: '备注', dataIndex: 'remark' },
  { title: '创建时间', dataIndex: 'createdAt', slotName: 'createdAt' },
  { title: '操作', dataIndex: 'action', slotName: 'action' },
];

// 新增字典数据
const handleAdd = () => {
  modalVisible.value = true;
  modalTitle.value = '新增字典数据';

  Object.assign(modalForm, proxy.$route.params);
};

// 修改字典数据
const handleEdit = (record) => {
  modalVisible.value = true;
  modalTitle.value = '修改字典数据';

  Object.assign(modalForm, proxy.$route.params, record);
  console.log(modalForm)
};

// 提交表单前检查
const handleBeforeOk = (done) => {
  modalFormRef.value.validate((err) => {
    if (err) {
      proxy.$message.error('表单校验失败');
      done(false);
    } else {
      done();
    }
  })
}

// 提交表单
const handleSubmit = async () => {
  if (modalForm.dictCode) {
    const { code, msg } = await updateDictData(modalForm, modalForm.dictCode);
    if ( code == 200 ) {
      proxy.$message.success('修改成功');
    } else {
      proxy.$message.error(msg);
    }
  } else {
    const { code, msg } = await addDictData(modalForm);
    if (code == 200 ) {
      proxy.$message.success('新增成功');
    } else {
      proxy.$message.error(msg);
    }
  }
  getDictDataInfo({...proxy.$route.params, ...pager});
}

// 页码改变
const handlePageChange = (pagerIndex) => {
  currentPage.value = pagerIndex;
  pager.pageIndex = pagerIndex;
  getDictDataInfo({...proxy.$route.params, ...pager});
}

// 获取字典数据
const getDictDataInfo = async (params = {}) => {
  const { data, code, msg } = await getDictData(params);
  if ( code == 200 ) {
    tableData.value = data.list;
    Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
  } else {
    proxy.$message.error(msg);
  }
};

// 获取字典类型
const getDictTypeInfo = async () => {
  const res = await getDictType({ pageSize: 1000 });

  dictTypeOptions.value = res.data.list;
  Object.assign(queryForm, proxy.$route.params);
};

onBeforeMount(() => {
  getDictDataInfo(proxy.$route.params);
  getDictTypeInfo();
});
</script>

<style lang="scss" scoped>
.table-action {
  margin-bottom: 12px;
}
</style>
